<template>
  <xy-page title="个人中心">
    <ul id="content-ul">
      <li>
        <label>姓名</label>
        <p>{{userInfo.name}}</p>
      </li>
      <li>
        <label>密码</label>
        <span href="javascript:void(0);" @click="editRow()">修改密码</span>
      </li>
    </ul>

     <!-- 保存记录-STR -->
    <el-dialog :title="editDialog.title" :visible.sync="editDialog.show" class="modal-resetpwd">
      <div class="form-row form-group ">
        <label class="text-right">
          <span class="require">*</span>原始密码:</label>
        <el-input v-model="editDialog.data.passwd" type="password" placeholder="请输入原始密码" auto-complete="off"></el-input>
        <span class="errmsg">{{editDialog.errmsg.passwd}}</span>
      </div>

      <div class="form-row form-group ">
        <label class="text-right">
          <span class="require">*</span>修改密码:</label>
        <el-input v-model="editDialog.data.newPasswd" type="password" placeholder="请输入修改密码" auto-complete="off"></el-input>
        <span class="errmsg">{{editDialog.errmsg.newPasswd}}</span>
      </div>

      <div class="form-row form-group ">
        <label class="text-right">
          <span class="require">*</span>确认密码:</label>
        <el-input v-model="editDialog.data.renewPasswd" type="password" placeholder="请输入确认密码" auto-complete="off"></el-input>
        <span class="errmsg">{{editDialog.errmsg.renewPasswd}}</span>
      </div>

      <div slot="footer" class="dialog-footer">
        <xy-save v-model="editDialog.save" type="primary" @click="saveDialog">确 定</xy-save>
        <el-button  @click="editDialog.show = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 保存记录-END -->
  </xy-page>

  
      
</template>

<script>

import userModel from '@M/user';

export default {
  name:"auth-user-index",
  data(){
    return {
      userInfo:userModel.get(),
      editDialog:{
        title:"修改密码",
        url:"/admin/auth/instance/authApp/rePasswd.do",
        data:{
          passwd:"",
          newPasswd:"",
          renewPasswd:""
        },
        errmsg:{
          passwd:"",
          newPasswd:"",
          renewPasswd:""
        },
        save:false,
        show:false
      }

    };
  },
  methods:{
    editRow(){
      this.editDialog =  this.$options.data().editDialog;
      this.editDialog.show = true;
    },
    saveDialog(){
      this.editDialog.errmsg = this.$options.data().editDialog.errmsg;
      if(!this.editDialog.data.passwd){
        this.editDialog.errmsg.passwd = "请输入原始密码";
        return;
      }
      if(!this.editDialog.data.newPasswd){
        this.editDialog.errmsg.newPasswd = "请输入确认密码";
        return;
      }
      if(this.editDialog.data.newPasswd != this.editDialog.data.renewPasswd){
        this.editDialog.errmsg.renewPasswd = "请确认二次密码一致";
        return;
      }
      this.editDialog.save = true;
      this.$postStream(this.editDialog.url, {
        data:this.editDialog.data,
        success: res => {
          if(res.success){
            this.$message.warning(res.message);
            this.editDialog.show = false;
          }else{
            this.$message.error(res.message);
          }
          this.editDialog.save = false;
        },error: () => {
          this.editDialog.save = false;
        }
      });
    }
  }
}
</script>


<style lang="scss" scoped>
   #content-ul {
    margin-top: 20px;
    font-size: 14px;
    overflow: hidden;
    li {
      position: relative;
      width: 500px;
      overflow: hidden;
      &.li-binding {
        width: 450px;
      }
      input.file {
        position: absolute;
        left: 74px;
        height: 60px;
        width: 60px;
        z-index: 9;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        cursor: pointer;
      }
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: block;
        float: left;
      }
      label,
      p,
      i,
      em,
      span {
        width: 64px;
        height: 38px;
        line-height: 38px;
        display: block;
        float: left;
        margin-right: 10px;
      }
      p {
        width: 410px;
        &.account-580 {
          width: 110px;
          height: 24px;
          color: #fff;
          margin-top: 7px;
          line-height: 24px;
          background: #61C09F;
          border-radius: 3px;
          text-align: center;
        }
      }
      .introduce {
        width: 320px;
        line-height: 25px;
        float: left;
        margin-right: 10px;
        margin-top: 6px;
      }
      i,
      em,
      span {
        text-align: center;
        height: 24px;
        line-height: 24px;
        margin-top: 7px;
        color: #00AAEE;
      }
      span,
      em {
        cursor: pointer;
      }
      .toggle-color {
        color: #fff;
        background: #C7C7C7;
        border-radius: 3px;
      }
    }
  }

  .modal-resetpwd {
    .el-input {
      width: 300px;
    }
    .form-row {
      width: 100%;
      padding: 0;
      margin-top: 15px;
      .require {
        display: inline-block;
        color: #ED4F4F;
      }
      label {
        vertical-align: top;
        width: 68px;
        padding-right: 5px;
        line-height: 30px;
        height: 30px;
        font-size: 12px;
      }
      input {
        vertical-align: top;
        width: 240px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #DCDCDC;
        padding: 0 10px;
        font-size: 12px;
        margin-right: 8px;
      }
      .errmsg {
        color: #ED4F4F;
        font-size: 12px;
        display: inline-block;
        line-height: 30px;
        vertical-align: top;
      }
    }
  }
</style>


    